<template>
  <div class="group-manager">
    <div
      class="switch flex flex-cc flex-rb click bd-bottom bold"
      @click="showSelectUserDialog('exchange')"
    >
      <div class="flex flex-cc">
        <div class="icon flex flex-cc">
          <img
            style="width: 24px; transform: translateX(-4px)"
            src="@/kang/img/icon_group_exchange.png"
          />
        </div>
        <div>群主转让</div>
      </div>
    </div>

    <div
      class="switch flex flex-cc flex-rb click"
      @click="showSelectUserDialog('miss')"
    >
      <div class="flex flex-cc">
        <div class="icon flex flex-cc">
          <img
            style="width: 24px; transform: translateX(-4px)"
            src="@/kang/img/icon_group_miss.png"
          />
        </div>
        <div>群禁言设置</div>
      </div>
    </div>

    <div class="switch flex flex-cc flex-rb">
      <div class="flex flex-cc">
        <div class="icon flex flex-cc">
          <img
            style="width: 24px; transform: translateX(-4px)"
            src="@/kang/img/icon_group_all_miss.png"
          />
        </div>
        <div>全体禁言</div>
      </div>

      <div>
        <n-switch></n-switch>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onBeforeUnmount } from 'vue'
import store from '@/store'
import api from '@/kang/js/api'
import mitt from '@/kang/js/mitt'
import wfc from '@/wfc/client/wfc'
import GroupMemberType from '@/wfc/model/groupMemberType'
import EventType from '@/wfc/client/wfcEvent'

const info = store.state.conversation.currentConversationInfo
const selectUserConfig = ref({})
const memberList = ref([])

// 群Id
const groupId = computed(() => {
  return info.target
})

onMounted(() => {
  onMemberListUpdate()
  wfc.eventEmitter.on(EventType.UserInfosUpdate, onMemberListUpdate)
  wfc.eventEmitter.on(EventType.GroupMembersUpdate, onMemberListUpdate)
})

onBeforeUnmount(() => {
  wfc.eventEmitter.removeListener(EventType.UserInfosUpdate, onMemberListUpdate)
  wfc.eventEmitter.removeListener(
    EventType.GroupMembersUpdate,
    onMemberListUpdate
  )
})

// 转让群主
async function exchangeQunzhu({ selectedUserList }) {
  try {
    const params = {
      groupId: groupId.value,
      newOwner: selectedUserList[0].id,
    }

    selectUserConfig.value.loading = true
    const { code } = await api.exchangeQunzhu(params)
    selectUserConfig.value.loading = false

    if (code === 200) {
      $message.success('转让成功')
      selectUserConfig.value.visible = false
      mitt.emit('dialog:groupManager', false)
      wfc.updateConversationInfo(info.conversation)
    }
  } catch (err) {
    console.log(err)
    selectUserConfig.value.loading = false
  }
}

// 成员禁言
function missMember({ selectedUserList, unselectedUserList }) {
  wfc.muteGroupMembers(
    groupId.value,
    true,
    selectedUserList.map((v) => v.id),
    [0],
    '',
    () => {
      wfc.updateConversationInfo(info.conversation)
    },
    (err) => {
      console.error(err)
    }
  )

  wfc.muteGroupMembers(
    groupId.value,
    false,
    unselectedUserList.map((v) => v.id),
    [0],
    '',
    () => {
      $message.success('设置成功')
      wfc.updateConversationInfo(info.conversation)
    },
    (err) => {
      console.error(err)
      $message.error('设置失败')
    }
  )
}

function onMemberListUpdate() {
  memberList.value = store.getConversationMemberUsrInfos(info.conversation)
}

function showSelectUserDialog(type = 'exchange') {
  if (type === 'exchange') {
    selectUserConfig.value = {
      title: '群主转让',
      submitBtnText: '确认转让',
      list: memberList.value
        .filter((v) => v.uid != wfc.getUserId())
        .map((v) => {
          return {
            id: v.uid,
            avatar: v.portrait,
            name: v.displayName || v.userName,
            isSelected: false,
          }
        }),
      visible: true,
      loading: false,
      isSingle: true,
      onSubmit: (e) => exchangeQunzhu(e),
    }
  } else {
    selectUserConfig.value = {
      title: '群禁言设置',
      submitBtnText: '确认禁言',
      list: memberList.value
        .filter((v) => v.uid != wfc.getUserId())
        .map((v) => {
          return {
            id: v.uid,
            avatar: v.portrait,
            name: v.displayName || v.userName,
            isSelected: v.type === GroupMemberType.Muted,
          }
        }),
      visible: true,
      loading: false,
      onSubmit: (e) => missMember(e),
    }
  }

  mitt.emit('dialog:selectUser', selectUserConfig.value)
}
</script>

<style lang="scss" scoped>
.group-manager {
  .switch {
    padding: 10px;

    &.click {
      &:hover {
        background-color: var(--color-bg);
      }
    }

    .icon {
      width: 30px;
    }
  }
}
</style>
